<!-- 醒目大牌 -->
<template>
	<view class="eye-catching">
		<block v-for="(value, index) in list" :key="index">
			<block v-if="index < 3">
				<view class="eye-catching-item" @click="shopBtn(value)">
					<image :src="$Utils.img(value.imageUrl)" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
				</view>
			</block>
			<block v-else>
				<view class="eye-catching-small" @click="shopBtn(value)"><image :src="$Utils.img(value.imageUrl)" mode="" style="width: 100%;height: 100%;"></image></view>
			</block>
		</block>
	</view>
</template>

<script>
export default {
	name: 'eye-catching',
	data() {
		return {};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods: {
		shopBtn(val) {
			this.$Router.push({
				path: '/shopPages/shop/shop',
				query: {
					site_id: val.siteId[0]
				}
			});
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.eye-catching {
	display: flex;
	flex-wrap: wrap;
	padding: 0 18rpx 20rpx;
	.eye-catching-item {
		// width: 216rpx;
		// height: 250rpx;
		// margin: 10rpx;
		// background-color: #ffffff;
		// border-radius: 20rpx;
		width: 216rpx;
		height: 114rpx;
		padding: 16rpx 68rpx;
		margin: 10rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.eye-catching-small {
		width: 216rpx;
		height: 114rpx;
		padding: 16rpx 68rpx;
		margin: 10rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
}
</style>
